<template>
  <div class="cen-bottom fr">
    <div class="info-title1">
      <!-- <img src="../../assets/img/left@2x.png" class="left_right_icon" /> -->
      <div small-bg>
        <dv-decoration3 style="width:250px;height:30px;" />
      </div>
      <div class="titleName">负荷</div>
      <!-- <img src="../../assets/img/right@2x.png" class="left_right_icon" /> -->
      <div small-bg>
        <dv-decoration3 style="width:250px;height:30px;" />
      </div>
    </div>
    <div class="info1 display_flex3 align-items">
      <div class="electro-charts" small-bg>
        <dv-decoration-9 style="width:150px;height:150px;margin-left: 20%;" class="loadEcharts">
          <div color-green font-600 bg="~ dark/0">
            66%
          </div>
        </dv-decoration-9>
        <!-- <div ref="loadEcharts" class="loadEcharts" style="width: 100%; height: 80%" v-if="isRecent"></div> -->
        <div class="loadvalue" v-if="isRecent">
          负荷：<span style="color: #0193ca" v-if="electricityDataInfo.curLoad">{{ electricityDataInfo.curLoad.value || 0
          }}</span><span style="color: #0193ca" v-else>0</span>kw
        </div>
      </div>
      <div class="electro-charts1">
        <div class="daterange">
          <div>
            <el-button-group>
              <el-button type="primary" :class="active_data == 1 ? 'button_date_active' : 'button_date'"
                @click.stop="handledata(1)">日</el-button>
              <el-button type="primary" :class="
                active_data == 2
                  ? 'button_date_active'
                  : 'button_date borderright'
              " @click.stop="handledata(2)">月</el-button>
            </el-button-group>
          </div>
        </div>
        <div class="loadEchartsRight">
          <div ref="recentElectricity" style="width: 100%; height: 100%" v-if="isRecent"></div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import axios from "axios";
import { ref, reactive, onMounted, onBeforeUnmount } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import * as echarts from "echarts";
import api from "../../api/api";
var loadEchartsOption = {
  series: [
    {
      type: "gauge",
      center: [115, 90],
      radius: "60%",
      min: 0,
      max: 60,
      splitNumber: 12,
      itemStyle: {
        color: "#FFAB91",
      },
      progress: {
        show: false,
        width: 20,
      },
      pointer: {
        show: false,
      },
      axisLine: {
        lineStyle: {
          width: 5,
        },
      },
      axisTick: {
        show: false,
        distance: 0,
        splitNumber: 5,
        lineStyle: {
          width: 2,
          color: "#0E6DE9",
        },
      },
      splitLine: {
        show: true,
        // distance: -22,
        // length: 20,
        lineStyle: { width: 3, color: "#0E6DE9" },
        itemStyle: {
          fontSize: 10, //字体大小
          color: "#0E6DE9",
        },
      },
      axisLabel: { show: false, distance: 0, color: "#999", fontSize: 20 },
      anchor: {
        show: false,
      },
      title: {
        show: false,
      },
      detail: {
        valueAnimation: true,
        // width: "40%",
        lineHeight: 40,
        borderRadius: 8,
        offsetCenter: [0, "35%"],
        fontSize: 20,
        fontWeight: "bolder",
        formatter: "{value} ",
        color: "inherit",
      },
      data: [
        {
          value: 60,
        },
      ],
    },
    {
      type: "gauge",
      center: [115, 90],
      radius: "60%",
      min: 0,
      max: 100,
      itemStyle: {
        fontSize: 10, //字体大小
        color: "#FD7347",
      },
      progress: {
        show: true,
        width: 8,
        itemStyle: {
          color: "#0E6DE9",
        },
      },
      pointer: {
        show: false,
      },
      axisLine: {
        show: false,
      },
      axisTick: {
        show: true,
      },
      splitLine: {
        show: false,
      },
      axisLabel: {
        show: false,
      },
      detail: {
        show: false,
      },
      title: {
        //设置仪表盘中间显示文字样式
        color: "#fff",
        fontWeight: "bolder",
        fontSize: 14,
        color: "white",
      },
      data: [
        {
          value: 60,
          name: "负载率(%)",
          axisLine: {
            lineStyle: {
              color: "#fff",
            },
          },
          title: {
            offsetCenter: ["0%", "-20%"],
          },
        },
      ],
    },
  ],
};
function randomData() {
  now = new Date(+now + oneDay);
  value = value + Math.random() * 21 - 10;
  return {
    name: "",
    value: [
      [now.getFullYear(), now.getMonth() + 1, now.getDate()].join("/"),
      Math.round(value),
    ],
  };
}
var recentElectricityOption = {
  title: {
    text: "",
  },
  tooltip: {
    trigger: "axis",
    axisPointer: {
      type: "cross",
      label: {
        backgroundColor: "#6a7985",
      },
    },
  },
  legend: {
    data: ["今日最高：1757.1kw", "昨日最高：1657.2kw"],
    left: "right",
    right: 10,
    textStyle: {
      fontSize: 11, //字体大小
      color: "#ffffff", //字体颜色
    },
    selected: {
      "今日最高：1757.1kw": false,
      "昨日最高：1657.2kw": true,
    },
  },
  grid: {
    left: "3%",
    right: "4%",
    bottom: "5%",
    top: "30%",
    containLabel: true,
  },
  xAxis: [
    {
      type: "category",
      boundaryGap: false,
      data: [],
      axisLabel: {
        show: true,
        textStyle: {
          color: "#ffffff",
        },
      },
      splitLine: { show: false },
    },
  ],
  yAxis: [
    {
      type: "value",
      splitLine: { show: false },
      data: ["Mon", "Tue"],
      axisLabel: {
        show: true,
        textStyle: {
          color: "#ffffff",
        },
      },
    },
  ],
  series: [
    {
      type: "line",
      name: "今日最高：1757.1kw",
      areaStyle: {},
      showSymbol: true, //是否默认展示圆点
      symbol: "circle", //设定为实心点
      symbolSize: 1, //设定实心点的大小
      data: [120, 132, 101, 134, 90, 230, 210],

      itemStyle: {
        normal: {
          color: new echarts.graphic.LinearGradient(
            0,
            1,
            0,
            0,
            [
              {
                offset: 0,
                color: "#8b8b8b26", // 0% 处的颜色
              },
              {
                offset: 1,
                color: "#E6AF08",
              },
            ],
            false
          ),
        },
      },
      data: [120, 132, 101, 134, 90, 230, 210],
    },
    {
      name: "昨日最高：1657.2kw",
      type: "line",
      areaStyle: {},
      showSymbol: true, //是否默认展示圆点
      symbol: "circle", //设定为实心点
      symbolSize: 1, //设定实心点的大小
      axisLabel: {
        show: true,
        textStyle: {
          color: "#ffffff",
        },
      },
      emphasis: {
        focus: "series",
      },
      itemStyle: {
        normal: {
          color: new echarts.graphic.LinearGradient(
            0,
            1,
            0,
            0,
            [
              {
                offset: 0,
                color: "#8b8b8b26", // 0% 处的颜色
              },
              {
                offset: 1,
                color: "#0E6DE9",
              },
            ],
            false
          ),
        },
      },
      data: [220, 182, 191, 234, 290, 330, 310],
    },
  ],
};
export default {
  components: {},
  setup(props, conts) {
    const loadEcharts = ref(null);
    const recentElectricity = ref(null);
    const electricityDataInfo = ref({});
    const active_data = ref(1);
    const isRecent = ref(true);
    const getelectro = () => {
      isRecent.value = true;
      electricityDataInfo.value = {};
      const setIntervalTime = ref(null);
      let dateType = "day";
      if (active_data.value == 1) {
        dateType = "day";
      } else {
        dateType = "month";
      }
      api
        .postFormAPI("backup/electricityDataInfo/initHomeLoad", {
          devId: "84167",
          dateType: dateType,
        })
        .then((res) => {
          if (res.data.code == 1) {
            console.log(res.data);
            let electricitydata = res.data.data;
            electricityDataInfo.value = res.data.data;
            // 初始化
            // let barloadEcharts = echarts.init(loadEcharts.value);
            // loadEchartsOption.series[0].data[0] = [electricitydata.loadRate];
            // loadEchartsOption.series[1].data[1] = [electricitydata.loadRate];
            // barloadEcharts.setOption(loadEchartsOption);
            // window.addEventListener("resize", function () {
            //   //自适应大小, 不用的话不会自适应大小。
            //   barloadEcharts.resize();
            // });

            let barRecentEcharts = echarts.init(recentElectricity.value);
            let series = [];
            let series1 = [];
            let xAxisdata = [];
            let legendName = "";
            let legendName1 = "";
            if (dateType == "day") {
              series = electricitydata.todayAllLoadDataList;
              series1 = electricitydata.yesterdayAllLoadDataList;
              legendName = "今日最高：" + electricitydata.todayMaxLoad + "kw";
              legendName1 =
                "昨日最高：" + electricitydata.yesterdayMaxLoad + "kw";
              for (
                var i = 0;
                i < electricitydata.todayAllLoadDataList.length;
                i++
              ) {
                if (
                  electricitydata.todayAllLoadDataList[i] &&
                  electricitydata.todayAllLoadDataList[i].time
                ) {
                  xAxisdata.push(electricitydata.todayAllLoadDataList[i].time);
                }
              }
            } else {
              series = electricitydata.curMonthLoadDataList;
              series1 = electricitydata.lastMonthLoadDataList;
              legendName =
                "当月最高：" + electricitydata.curMonthLoadDataMax + "kw";
              legendName1 =
                "上月最高：" + electricitydata.lastMonthLoadDataMax + "kw";
              for (var i = 0; i < series1.length; i++) {
                if (series1[i] && series1[i].time) {
                  xAxisdata.push(series1[i].time);
                }
              }
              // for (var i = 0; i < series.length; i++) {
              //   if (series[i] && series[i].time) {
              //     xAxisdata.push(series[i].time);
              //   }
              // }
            }
            // console.log(xAxisdata);
            recentElectricityOption.legend.data[0] = legendName;
            recentElectricityOption.legend.data[1] = legendName1;
            recentElectricityOption.series[0].name = legendName;
            recentElectricityOption.series[1].name = legendName1;
            recentElectricityOption.series[0].data = series;
            recentElectricityOption.series[1].data = series1;
            recentElectricityOption.xAxis[0].data = xAxisdata;
            let index = 0;
            // setIntervalTime.value = setInterval(function () {
            //   barRecentEcharts.dispatchAction({
            //     type: "downplay",
            //     seriesIndex: 0,
            //     dataIndex: index,
            //   });
            //   index++;
            // }, 1500);
            barRecentEcharts.currentIndex = -1;
            setInterval(function () {
              var dataLen = recentElectricityOption.series[0].data.length;
              var dataLen1 = recentElectricityOption.series[1].data.length;
              // 取消之前高亮的图形
              barRecentEcharts.dispatchAction({
                type: "downplay",
                seriesIndex: 0,
                dataIndex: barRecentEcharts.currentIndex,
              });
              barRecentEcharts.currentIndex =
                (barRecentEcharts.currentIndex + 1) % dataLen;
              barRecentEcharts.currentIndex =
                (barRecentEcharts.currentIndex + 1) % dataLen1;
              // 高亮当前图形
              barRecentEcharts.dispatchAction({
                type: "highlight",
                seriesIndex: 0,
                dataIndex: barRecentEcharts.currentIndex,
              });
            }, 1000);
            barRecentEcharts.setOption(recentElectricityOption);

            // let data1 = recentElectricityOption.series[0].data;
            // let data2 = recentElectricityOption.series[1].data;
            // console.log(series[series.length - 1]);
            // window.setInterval(function () {
            //   series.push(series.shift());
            //   series1.push(series1.shift());
            //   series.shift();
            //   series1.shift();
            //   refreshData();
            // }, 1000);

            // function refreshData() {
            //   recentElectricityOption.series[0].data = series;
            //   recentElectricityOption.series[1].data = series1;
            //   barRecentEcharts.setOption(recentElectricityOption);
            // }
            window.addEventListener("resize", function () {
              //自适应大小, 不用的话不会自适应大小。
              barRecentEcharts.resize();
            });
          } else {
            ElMessage.error(res.data.message);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    };

    onMounted(async () => {
      getelectro();
      // setIntervalTime.value = setInterval(function () {
      //   if (active_data.value == 1) {
      //     active_data.value = 2;
      //   } else {
      //     active_data.value = 1;
      //   }
      //   getelectro();
      // }, 3000);
    });
    const handledata = (index) => {
      active_data.value = index;
      isRecent.value = false;
      // if (setIntervalTime.value) {
      //   clearInterval(setIntervalTime.value);
      // }

      setTimeout(function () {
        getelectro();
      }, 300);
    };
    onBeforeUnmount(async () => {
      // if (setIntervalTime.value) {
      //   clearInterval(setIntervalTime.value);
      // }
    });
    return {
      electricityDataInfo,
      loadEcharts,
      recentElectricity,
      isRecent,
      active_data,
      handledata,
    };
  },
};
</script>
<style lang="less" scoped>
@import "../../assets/css/common.css";
@import "../../assets/css/geoMap.css";
@import "./module.less";

.electro-charts {
  width: 35%;
  height: 100%;
  position: relative;
  color: #fff;
  padding: 15px 0;
}

.electro-charts1 {
  position: relative;
  width: 69%;
  height: 100%;
}

.daterange {
  position: relative;
  margin: 10px 0;
  height: 30px;
  z-index: 9999;
}

.loadEchartsRight {
  position: relative;
  bottom: 30px;
  width: 100%;
  height: 90%;
}

.button_date_active {
  background: #0e6de9;
}

.button_date {
  background: none !important;
  color: #0e6de9;
}

.loadvalue {
  position: relative;
  text-align: center;
  right: 10%;
  height: 40px;
  line-height: 40px;
  bottom: 30px;
  top: 10px;
}

.titleName {
  padding: 0 30px;
}
</style>